<script setup lang="ts">
import { ElRow, ElCol } from "element-plus";
import { ref, onMounted, onUnmounted, watch } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
import type { CmComponentRef } from "codemirror-editor-vue3";
import type { Editor, EditorConfiguration } from "codemirror";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
const scriptUrl = defineModel("scriptUrl");
const demoFileUrl = defineModel("demoFileUrl");
const demoConfigType = defineModel("demoConfigType");
const demoConfigMode = defineModel("demoConfigMode");
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: "OnlyOfficeDemo",
});

const props = withDefaults(defineProps<Props>(), {});

const getUuid = function () {
  return "xxxxxxxxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
const code = ref(``);
const containerRef = ref();
const cmRef = ref<CmComponentRef>();
const cmOptions: EditorConfiguration = {
  mode: "text/javascript",
};

const onChange = (val: string, cm: Editor) => {
  // console.log(val);
  // console.log(cm.getValue());
};

const onInput = (val: string) => {
  // console.log(val);
};

const onReady = (cm: Editor) => {
  // console.log(cm.focus());
};

let containerWidth = 0;
let containerHeight = 0;
let documentEditorKey = ref("");

const init = function () {
  fetch(scriptUrl.value)
    .then(function (data) {
      return data.text();
    })
    .then(function (data) {
      code.value = data;
    });

  if (window.DocEditor) {
    // if (connector) {
    //   connector.disconnect();
    // }
  }
  config.value.document.key = getUuid();
  config.value.document.url = demoFileUrl.value;
  config.value.document.type = demoConfigType.value;
  config.value.editorConfig.mode = demoConfigMode.value;
  documentEditorKey.value = config.value.document.key;
};

onMounted(() => {
  containerWidth = containerRef.value.parentNode.offsetWidth;
  containerHeight = containerRef.value.parentNode.offsetHeight;
  containerRef.value.style.height = containerHeight + "px";
  if (containerHeight > 800) {
    containerHeight = 800;
  }
  setTimeout(() => {
    cmRef.value?.resize("100%", containerHeight);
  }, 1000);
  config.value.document.key = getUuid();
  config.value.document.url = demoFileUrl.value;
  config.value.type = demoConfigType.value;
  config.value.editorConfig.mode = demoConfigMode.value;
  documentEditorKey.value = config.value.document.key;
  init();
});

onUnmounted(() => {
  cmRef.value?.destroy();
});

watch(scriptUrl, async (newscriptUrl, oldscriptUrl) => {
  fetch(newscriptUrl)
    .then(function (data) {
      return data.text();
    })
    .then(function (data) {
      code.value = data;
    });

  if (window.DocEditor) {
    if (window.connector && window.connector.isConnected) {
      window.connector.disconnect();
    }
  }

  config.value.document.key = getUuid();
  config.value.document.url = demoFileUrl.value;
  config.value.type = demoConfigType.value;
  config.value.editorConfig.mode = demoConfigMode.value;
  documentEditorKey.value = config.value.document.key;
});

watch(demoFileUrl, async (newsDemoFileUrl, oldDemoFileUrl) => {});

let currentConnector = null;
const onDocumentReady = () => {
  console.log("onDocumentReady");
  console.log(config);
  currentConnector = DocEditor.instances.docEditor.createConnector();
    window.docEditor = DocEditor.instances.docEditor;
    window.connector = currentConnector;
    code.value += "\n\nonDocumentReady\n";
  setTimeout(() => {
    
  }, 1000);
};

var config = ref({
  type: "desktop",
  // "type": "mobile",
  documentType: "word",
  historyList: {
    history: [],
    currentVersion: "1",
  },
  document: {
    title: "通用模板.docx",
    // url: "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",
    url: "",
    permissions: {
      print: true,
      download: true,
      edit: true,
    },
    fileType: "docx",
    key: getUuid(),
  },
  editorConfig: {
    customization: {
      autosave: false,
      compactToolbar: false,
      forcesave: true,
      toolbarNoTabs: true,
      help: false,
      compactHeader: false,
      hideRightMenu: true,
      plugins: true,
      uiTheme: "theme-light",
    },
    mode: "edit",
    callbackUrl:
      "https://api.docs.onlyoffice.com/dummyCallback",
    lang: "zh-CN",
    user: {
      name: "曹瑞剑雄",
      id: "104",
    },
    events: {
      onDownloadAs: function(event){
          const fileType = event.data.fileType
          const url = event.data.url
          console.log(`ONLYOFFICE Document Editor create file: ${url}`)
      },
    }
  },
});

let onDownloadAs = function(event){
    const fileType = event.data.fileType
    const url = event.data.url
    console.log(`ONLYOFFICE Document Editor create file: ${url}`)
};

</script>

<template>
  <di class="onlyoffice_demo_container" ref="containerRef">
    <el-row>
      <el-col :span="11">
        <Codemirror
          v-model:value="code"
          :options="cmOptions"
          border
          ref="cmRef"
          width="100%"
          height="100%"
          @change="onChange"
          @input="onInput"
          @ready="onReady"
        >
        </Codemirror>
      </el-col>
      <el-col :span="13">
        <DocumentEditor
          id="docEditor"
          :documentServerUrl="VITE_ONLY_OFFICE_BASE_URL"
          :config="config"
          :events_onDocumentReady="onDocumentReady"
          :onDownloadAs = "onDownloadAs"
        />
      </el-col>
    </el-row>
  </di>
</template>

<style scoped>
.onlyoffice_demo_container {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>
